<template>
  <div class="wrap">
    <div class="d_left">
      图片
    </div>
    <div class="d_right">
      <div v-for="(item, i) in hotlist" :key="i">
        <img
          :src="'http://47.115.85.237:3000/' + item.product_picture"
          alt=""
        />
        <p>{{ item.product_name }}</p>
        <p>{{ item.product_title }}</p>

        <p>
          <span style="color: orange;"
            ><big
              ><b>￥{{ item.product_selling_price }}</b></big
            ></span
          >
          &emsp;
          <del style="color: #ccc;">￥{{ item.product_price }}</del>
        </p>
      </div>

      <div>
        <p style="line-height: 300px;">查看更多>></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      hotlist: [],
    };
  },
  mounted() {
    this.$axios
      .post("/api/product/getHotProduct", { categoryName: ["手机"] })
      .then((res) => {
        // console.log(res);
        this.hotlist = res.data.Product;
      });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 1400px;
  height: 625px;
  margin: 0 auto;
  display: flex;
  margin-top: 10px;
  .d_left {
    width: 300px;
    height: 100%;
    background-color: #fff;
  }
  .d_right {
    width: 1100px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    div {
      width: 260px;
      height: 49%;
      background-color: #fff;
    }
     div:hover{
      box-shadow: 5px 5px 5px 5px rgb(241, 12, 12);
    }
  }
}
</style>
